<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>企业微信信息化平台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

<script th:src="@{/layui/layui.js}"></script>

<script th:src="@{/layui/jquery-3.6.0.min.js}"></script>

<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">-->
<!--    <legend>企业微信信息化</legend>-->
<!--</fieldset>-->

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md2">
            <form class="layui-form">
                <label>
                    <select name="all_engineer" lay-verify="" lay-search lay-filter="formDemo" id="all_engineer">
                        <option value="all_engineer">全部员工</option>
                        <option th:each="engineer : ${all_engineer}" th:id="${engineer.getWx_engineer_id()}"
                                th:value="${engineer.getEngineer_name()}"
                                th:text="${engineer.getEngineer_name()}"></option>
                    </select>
                </label>
            </form>
            <div class="layui-panel">
                <ul class="layui-menu" id="docDemoMenu1">
                    <li lay-options="{type:'message',status:0, engineer_id:'all_engineer'}">
                        <div class="layui-menu-body-title">未响应消息</div>
                    </li>
                    <li lay-options="{type:'problem',status:0, engineer_id:'all_engineer'}">
                        <div class="layui-menu-body-title">未处理问题</div>
                    </li>
                    <li lay-options="{type: 'message',status:1, engineer_id:'all_engineer'}">
                        <div class="layui-menu-body-title">已响应消息</div>
                    </li>
                    <li lay-options="{type:'problem',status:1, engineer_id:'all_engineer'}">
                        <div class="layui-menu-body-title">已处理问题</div>
                    </li>

                </ul>
            </div>

        </div>
        <div class="layui-col-md4">
            <table class="layui-table">
                <colgroup>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>群名</th>
                </tr>
                </thead>
                <tbody id="group_list">
                </tbody>
            </table>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form">
                <div id="message_card"></div>
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>问题</th>
                        <th>工程师</th>
                        <th>持续时间</th>
                        <th>解决</th>
                    </tr>
                    </thead>
                    <tbody id="message_list">
                    <!--                    <tr>-->
                    <!--                        <td>text</td>-->
                    <!--                        <td>engineer</td>-->
                    <!--                        <td>time</td>-->
                    <!--                        <td>button</td>-->
                    <!--                    </tr>-->
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

<script>

    let options = {type: "message", status: "0", engineer_id: "all_engineer", cp_id: "", cp_name: "", hq: ""}

    let group_list = document.getElementById("group_list")

    //ajax获取到的信息，先保存在这里
    let all_group_msg;

    //<span class="layui-badge layui-bg-cyan">数量</span>
    let div_group_msg = "<tr>\n" +
        "                    <td><button type=\"button\"  onclick=\"selMsgByGroup(id,value,'待处理数量')\" class=\"layui-btn layui-btn-normal layui-btn-fluid\" id='cp_id' value='群名'>cp_name</button></td>\n" +
        "                </tr>"

    let button_update_msg_status = "<button type=\"button\"  onclick=\"update_msg_status('msg_id','engineer')\" class=\"layui-btn layui-btn-normal layui-btn-fluid\" >解决</button>"


    layui.use('dropdown', function () {
        let dropdown = layui.dropdown;
        //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
        dropdown.on('click(docDemoMenu1)', function (data) {
            options.type = data.type
            options.status = data.status
            // const othis = $(this); //当前菜单列表的 DOM 对象
            console.log(options); //菜单列表的 lay-options 中的参数

            ask_all_group_message(options)

        });
    });

    let form_solution = "<form class='layui-form' lay-filter=\"solution_input\"> \n" +
        "      <textarea placeholder=\"请输入内容\" class=\"layui-textarea\" name=\"solution\"></textarea>\n" +
        "    <button type=\"button\" class=\"layui-btn layui-btn-fluid\" id=\"LAY-component-form-getval\">提交</button></form>"

    function update_problem_status(msg_id, engineer) {
        console.log(msg_id, engineer)
        layui.use('layer', function () {
            const index = layer.open({
                type: 1,
                title: "填写你的解决方案",
                scrollbar: false,
                content: form_solution,
                area: ['420px', '195px']
            });

            layui.use('form', function () {
                const form = layui.form;
                //表单取值
                layui.$('#LAY-component-form-getval').on('click', function () {
                    let data = form.val('solution_input');
                    data['engineer'] = engineer
                    data['hq'] = msg_id
                    data['type'] = options.type
                    data['status'] = options.status
                    ajax_update_msg_status(data)
                    parent.layer.closeAll()
                    layer.msg('已经解决啦');
                    document.getElementById(msg_id).innerHTML = ''
                    console.log(JSON.stringify(data))
                });

            });
        })
    }

    function update_message_status(msg_id, engineer) {
        console.log(msg_id, JSON.stringify(engineer))
        layer.msg('已经修改成功');
        document.getElementById(msg_id).innerHTML = ''
    }

    function ajax_update_msg_status(data) {

    }


    //通过人员id、消息状态、消息类型查询群名与消息数量
    function ask_all_group_message(data) {
        $.ajax({
            url: "/all_group_message"
            , data: {
                data: JSON.stringify(data)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                add_group_info(data)
                console.log(data)
            }
        })
    }

    let div_message_list = "<tr id='hq_id'>\n" +
        "                        <td>text</td>\n" +
        "                        <td>engineer</td>\n" +
        "                        <td>time</td>\n" +
        "                        <td>button</td>\n" +
        "                    </tr>"

    let div_group_info = "<span class=\"layui-badge layui-bg-cyan\">群名</span>" +
        "<span class=\"layui-badge layui-bg-orange\">消息类型</span>" +
        "<span class=\"layui-badge layui-bg-cyan\">具体类型</span>" +
        "<span class=\"layui-badge layui-bg-orange\">解决状态</span>" +
        "<span class=\"layui-badge layui-bg-cyan\">具体状态</span>" +
        "<span class=\"layui-badge layui-bg-orange\">待处理数量</span>" +
        "<span class=\"layui-badge layui-bg-cyan\">具体数量</span>"

    //群名按钮点击事件，通过cp_id、消息状态、消息类型查询
    function selMsgByGroup(id, cp_name, count_msg) {
        options.hq = count_msg
        options.cp_id = id
        options.cp_name = cp_name
        console.log(JSON.stringify(options))
        $.ajax({
            url: "/msg_byGroupId"
            , data: {
                data: JSON.stringify(options)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                let temp_message_list
                let temp_messageCard
                let messageList = document.getElementById("message_list")
                let messageCard = document.getElementById("message_card")
                messageList.innerHTML = ''
                for (let i = 0; i < data.length; i++) {

                    temp_message_list = div_message_list.replace("text", data[i]['text'])
                    temp_message_list = temp_message_list.replace("engineer", data[i]['engineer'])
                    temp_message_list = temp_message_list.replace("time", data[i]['time'])
                    temp_message_list = temp_message_list.replace("hq_id", data[i]['hq'])

                    if (data[i]['status'] === 0) {
                        //按钮
                        let temp_button_update_msg_status = button_update_msg_status.replace("msg_id", data[i]['hq'])
                        // temp_button_update_msg_status=temp_button_update_msg_status.replace("engineer",data[i]['engineer'])
                        temp_button_update_msg_status = temp_button_update_msg_status.replace("engineer", data[i])

                        if (data[i]['type'] === 'message') {
                            temp_button_update_msg_status = temp_button_update_msg_status.replace("update_msg_status", 'update_message_status')
                        }
                        temp_message_list = temp_message_list.replace("button", temp_button_update_msg_status)
                        // temp_message_list = temp_message_list.replace("button", button_update_msg_status.replace("engineer", data[i]['engineer']))

                    } else if (data[i]['status'] === 1) {
                        //解决人
                        temp_message_list = temp_message_list.replace("button", data[i]['processor'])
                    }

                    messageList.innerHTML = messageList.innerHTML + temp_message_list

                }
                temp_messageCard = div_group_info.replace("群名", options.cp_name)
                temp_messageCard = temp_messageCard.replace("具体类型", options.type)
                temp_messageCard = temp_messageCard.replace("具体状态", options.status ? ("已完成") : ("未处理"))
                temp_messageCard = temp_messageCard.replace("具体数量", options.hq)
                //表格前信息提示
                // messageCard.innerHTML = temp_messageCard

                all_group_msg = data
                console.log(data)
            }
        })
    }

    //在div名称为group_list中添加查询到的，群名按钮列表
    function add_group_info(data) {
        let div_group_msg_temp;
        group_list.innerHTML = ""
        for (let i = 0; i < data.length; i++) {
            div_group_msg_temp = div_group_msg.replace("cp_name", data[i]["cpname"] + "【" + data[i]["hq"] + "】")
            div_group_msg_temp = div_group_msg_temp.replace("群名", data[i]["cpname"])
            div_group_msg_temp = div_group_msg_temp.replace("cp_id", data[i]["cpid"])
            // div_group_msg_temp = div_group_msg_temp.replace("数量", "数量" + data[i]["hq"])
            div_group_msg_temp = div_group_msg_temp.replace("待处理数量", data[i]["hq"])
            group_list.innerHTML = group_list.innerHTML + div_group_msg_temp
        }


    }

    // {"engineer_name":"","group_name":"","type":"problem","status":"all"}

    layui.use('form', function () {
        const form = layui.form;
        form.on('select(formDemo)', function (data) {

            options.engineer_id = data.value
            console.log('选择的员工id' + options.toString()); //得到被选中的值
            ask_all_group_message(options)
        });

        // //表单取值
        // layui.$('#LAY-component-form-getval').on('click', function(){
        //     const data = form.val('example');
        //     alert(JSON.stringify(data));
        // });


        // form.on('submit(formDemo)', function (data) {
        //     question_list.innerHTML = ""
        //     // layer.msg(JSON.stringify(data.field));
        //     let choose = data.field.type
        //     console.log(choose)
        //     $.ajax({
        //         url: "/msg_search"
        //         , data: {
        //             data: JSON.stringify(data.field)
        //         }
        //         , type: "get"
        //         , dataType: "json"
        //         // , contentType: "application/json;charset=utf-8"
        //         , success: function (data) {
        //             let row = "";
        //             // console.log(data.length + "data.length")
        //             for (let i = 0; i < data.length; i++) {
        //                 console.log(data)
        //
        //                 for (let key in data[i]) {
        //                     if (data[i][key] != null) {
        //                         row = row + "<td width='80'>" + data[i][key] + "</td>"
        //                         // console.log(key + "" + data[i][key])
        //                     }
        //                 }
        //                 row = "<tr>" + row + "</tr>"
        //                 // console.log(row + "end")
        //             }
        //             question_list.innerHTML = question_list.innerHTML + row
        //             // console.log(data)
        //             //      $("#question_list").html(obj.title);
        //             // console.log(data)
        //             // layer.msg(data);
        //         }
        //     })
        //
        //
        //     return false;
        // });
    });

</script>


</body>
</html>